<template>
  <div class="visitorPlan">
    <div class="header">
      <div>访客计划</div>
      <div class="activity">
        <template v-for="(activity,index) in view.activities">
          <div
            v-if="activity.type == 2"
            :key="index"
            :title="activity.name"
            @click="onAction(activity)"
          >
            <span class="act-btns">{{activity.name}}</span>
          </div>
        </template>
      </div>
    </div>
    <div class="searchBox">
      <form_searchform :viewId="viewId" @onSearch="onSearch"></form_searchform>
    </div>
    <div class="vistorContain">
      <div class="dateAndTable">
        <div class="date">
          <!-- @blur="chooseDate" -->
          <!-- <el-date-picker
            class="picker"
            size="mini"
            v-model="value1"
            type="date"
            ref="datePickerRef"
            @change="chooseDate"
            @blur="chooseDateblur"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            popper-class="pickerOpt"
            placeholder="选择日期">
          </el-date-picker> -->
          <el-calendar v-model="value" class="calendar">
          </el-calendar>
        </div>
        <div class="table">
          <div>2023-3-20 全部访客计划</div>
          <el-table
            :data="tableData"
            >
            <el-table-column
              prop="name"
              label="姓名"
              >
            </el-table-column>
            <el-table-column
              prop="date"
              label="计划数量"
              >
            </el-table-column>
            <el-table-column
              prop="address"
              label="完成数量">
            </el-table-column>
            <el-table-column
              prop="address"
              label="完成比例">
            </el-table-column>
          </el-table> 
          <div class="page">
            <el-pagination
              small
              layout="prev, pager, next"
              :total="1">
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="planDetail">
        <template v-if="tableData.length > 0">
          <div class="plan_once" v-for="(item,index) in tableData" :key="index">
            <div class="planTime">{{item.items['__6QvoNJBm7sSzBVx15Qa'].value && item.items['__6QvoNJBm7sSzBVx15Qa'].value.substr(11)}}</div>
            <div class="planContent">
              <div class="timeContentLeft">
                <div class="goal">{{item.items['__ehTwij3mk8x4YnYLydq'].value}}</div>
                <div class="user" v-if="item.items['__hTVTGc4X9guSevrKNAn'].value"><el-avatar size="small">{{item.items['__hTVTGc4X9guSevrKNAn'].value.substring(item.items['__hTVTGc4X9guSevrKNAn'].value.length-2,item.items['__hTVTGc4X9guSevrKNAn'].value.length)}}</el-avatar><span>{{item.items['__hTVTGc4X9guSevrKNAn'].value}}</span></div>
              </div>
              <div class="timeContentRight">
                <span class="grey_tag">{{item.items['__JaLYs9APrqZgsHWRPG9'].value}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color:#409eff;">{{item.items['__ZhmwyO6YE0XsnozZ2Ot'].value}}</span>
              </div>
            </div>
            <div class="operation">
              <el-button type="primary" @click="changeState(item)">{{item.items['__LaIabjePJ4KpOAOEOoU'].value}}</el-button>
              <!-- <el-dropdown trigger="click" type="primary" @click="changeState(item)">
                <span style="color:#fff;">{{item.items['__LaIabjePJ4KpOAOEOoU'].value}}<i class="el-icon-caret-bottom" v-if="item.items['__LaIabjePJ4KpOAOEOoU'].value != '已完成'"></i></span>
                <el-dropdown-menu slot="dropdown" v-if="item.items['__LaIabjePJ4KpOAOEOoU'].value == '进行中'">
                  <el-dropdown-item @click="doCreate">新建跟进记录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown> -->
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getViewTemplate,
  getViewData,
  updatePlan,
} from "@/api.js"
import form_searchform from "@/components/form_searchform.vue"
export default {
  components: {
    form_searchform,
  },
  data() {
    return {
      tableData: [],
      customerName:'',
      searchObj:{},
      value1:'',
      viewId:'',
      value: new Date(),
      view: {}
    }
  },
  watch: {
    value: function() {
      this.getData()
    } 
  },
  created() {
    let queryData = this.$route.query
    this.viewId = queryData.viewid ? queryData.viewid : queryData.viewId ? queryData.viewId :''
    this.toGetViewTemplate()
  },
  mounted() {
    // this.handelFocus()
    this.value1 = this.writeCurrentDate()
    console.log(this.value1)
    // this.$nextTick(()=> {
    //   this.handelFocus()
    // })
  },
  methods: {
    changeState(item) {
      if(item.items['__LaIabjePJ4KpOAOEOoU'].value == '已完成') {
        return
      }
      updatePlan(item.id,{
        onSucess: res => {
          this.getData()
        }
      })
    },
    doCreate() {
      console.log('点击了')
      let params = {
        appId:obpmConfig.appId,
        actionContent: '__NWikB0yI5doqoCiB8TC',
        linkType:'00',
      }
      top.obpmOAction('open-eject',params)
    },
    onAction(act) {
      switch (act.type) {
        case 2: //新建
          console.log('点击了')
          let params = {
            appId:obpmConfig.appId,
            actionContent: act.onActionForm,
            name: this.view.name,
            linkType:'00',
          }
          top.obpmOAction('open-eject',params)
          break;
        default:
          break;
      }
    },
    chooseDateblur() {
      debugger
      this.$refs.datePickerRef.focus();
    },
    writeCurrentDate(val){
      debugger
      let now = new Date(val);
      let year=now.getFullYear();
      let month=(now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1) 
      let date=(now.getDate() < 10 ? '0' + now.getDate() : now.getDate()); 
      return year+"-"+month+"-"+date; 
    },
    onSearch(searchData) {
      let page = 1;
      let size = 9999
      this.getData(page, size, searchData);
    },
    toGetViewTemplate() {
      getViewTemplate(
        this.viewId,
        {
          onSucess: response => {
            if(response.data.data) {
              let viewData = response.data.data;
              this.view = viewData
              this.getData()
            }
          }
        }
      )
    },
    getData(page,size,searchData) {
      let formateValue = this.writeCurrentDate(this.value)
      console.log('formateValue',formateValue)
      let params = {
        parentId: '',
        isRelate: '',
        currpage: 1,
        lines: 9999,
        searchWord: "",
        treedocid: '',
        sortCol: '',
        sortStatus: '',
        Execution_Time:''
      }
      params.Execution_Time = formateValue
      getViewData(
        this.viewId,
        params,
        searchData ? searchData : {},
        {
          onSucess: response => {
            if(response.data.data) {
              this.tableData = response.data.data.data
            }
          }
        }
      )
    },

    chooseDate() {
      console.log(this.value1)
			this.$refs.datePickerRef.focus(); // 选择日期后依旧触发焦点
      this.getData()
		},
    handelFocus() {
      debugger
      this.$refs.datePickerRef.focus();
    }
  }
}
</script>

<style>
@import "../assets/style/visitorPlan.scss";
</style>